<template >
    <div class="page-container">
        <div class="form-container">
            <el-form :inline="true" label-width="80px" :size="'small'" ref="form">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="合同单号">
                            <el-input v-model="state.query.blNo" clearable placeholder="请输入" style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="客户合同号">
                            <el-input v-model="state.query.blN" clearable placeholder="请输入" style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="客户">
                            <el-select remote-show-suffix v-model="state.query.CustomId" placeholder="请选择客户"
                                style="width: 100%" clearable filterable remote :remote-method="getCustomData"
                                :loading="state.currentLoading">
                                <el-option v-for="item in state.clientList" :key="item.id" :label="item.comNameCn"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="运输方式">
                            <el-select remote-show-suffix v-model="state.query.salesman" placeholder="请选择运输方式"
                                style="width: 100%" clearable filterable remote :remote-method="getUserData"
                                :loading="state.salesmanLoading">
                                <el-option v-for="item in state.salesman" :key="item.id" :label="item.realName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="部门">
                            <!-- <el-select remote-show-suffix v-model="state.query.department" placeholder="请选择部门"
                                style="width: 100%" clearable filterable remote :loading="state.currentLoading">
                                <el-option v-for="item in department" :key="item.value" :label="item.label"
                                    :value="item.value">
                                    <span style="float: left"> {{ item.label }}</span>
                                </el-option>
                            </el-select> -->
                            <el-tree-select v-model="state.query.department" :data="state.department"
                                :render-after-expand="false" style="width: 100%"
                                :props="{ label: 'name', value: 'companyId' }" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="业务员">
                            <el-select remote-show-suffix v-model="state.query.salesman" placeholder="请选择业务员"
                                style="width: 100%" clearable filterable remote :remote-method="getUserData"
                                :loading="state.salesmanLoading">
                                <el-option v-for="item in state.salesman" :key="item.id" :label="item.realName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="币种">
                            <el-select remote-show-suffix v-model="state.query.currency" placeholder="请选择币种"
                                style="width: 100%" clearable filterable remote :remote-method="getCurrentData"
                                :loading="state.currentLoading">
                                <el-option v-for="item in state.current" :key="item.value" :label="item.label"
                                    :value="item.value">
                                    <span style="float: left"> {{ item.label }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="订单状态">
                            <el-select v-model="state.query.entId" placeholder="请选择" style="width: 100%" clearable
                                filterable>
                                <el-option label="全部" :value="1" />
                                <el-option label="草稿" :value="2" />
                                <el-option label="已审核" :value="3" />
                                <el-option label="待审核" :value="4" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-collapse-transition>
                    <div v-show="state.hidden">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="订单日期">
                                    <el-date-picker v-model="recDateTime" type="daterange" range-separator="~"
                                        start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width: 100%"
                                        clearable value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-collapse-transition>
                <div class="flex-container" style="margin-left: 20px">
                    <el-button type="primary" icon="search" @click="getList" size="small">
                        搜索
                    </el-button>
                    <el-button type="info" icon="refresh" @click="reset" size="small">
                        重置
                    </el-button>
                    <el-button type="primary" @click="state.hidden = !state.hidden" size="small" style="padding: 8px 15px">
                        <div class="flex-container">
                            <el-icon style="transform: rotate(90deg)">
                                <MoreFilled />
                            </el-icon>
                            {{ state.hidden ? "折叠" : "更多条件" }}
                        </div>
                    </el-button>
                </div>
            </el-form>
        </div>
        <div class="hint">
            <div class="item1">
                <span>同步更新温馨提示</span>
                <div>
                    <el-icon v-if="state.tipsShow" @click="tipsClose" style="cursor: pointer;" size="16" color="#000000">
                        <Close />
                    </el-icon>
                    <span style="color: #248BFF;cursor: pointer;" @click="state.tipsShow = true" v-else>展开</span>
                </div>
            </div>
            <el-collapse-transition>
                <div v-if="state.tipsShow">
                    <div class="item2">目前还有{{ 5 }}份合同还未从孚盟系统导入，请及时更新数据，避免影响后续操作<span @click="syncUpdate">同步更新</span></div>
                    <div class="item3">目前已有{{ 5 }}份数据处于待更新状态，请及时更新数据，避免影响后续操作<span @click="syncUpdate">同步更新</span></div>
                </div>
            </el-collapse-transition>
        </div>
        <div class="tableDiv">
            <div class="btns">
                <div class="left"><el-button @click="syncUpdate" type="primary">同步合同</el-button></div>
                <div class="right">
                    <el-button @click="customOpen">自定义列</el-button>
                    <el-button @click="refresh" icon="RefreshRight">刷新</el-button>
                </div>
            </div>
            <AppPageTable stripe :data="state.tableData.data" @change="getList" :height="0" :option="state.tableData.option"
                v-loading="state.tableLoading">
                <el-table-column sortable v-for="item in state.customColumn" :key="item.prop" :prop="item.prop"
                    :label="item.label" :width="item.width" align="center" showOverflowTooltip>
                    <template v-if="item.prop === 'blNo'" #default="{ row }">
                        <span style="color: #5a9cf8; cursor: pointer" @click="toEditPage(row.blNo)">{{ row.blNo }}</span>
                    </template>
                    <template v-if="item.prop === 'auditStatus'" #default="{ row }">
                        <div style="display: flex;align-items: center;">
                            <div style="width: 6px;height: 6px;border-radius: 50%;background: #248BFF;margin-right: 5px;"
                                class="left"></div>
                            <div class="right">{{ row.auditStatus === 1 ? '通过' : '未通过' }}</div>
                        </div>
                    </template>
                    <template v-if="item.prop === 'isGetInvolved'" #default="{ row }">
                        <div style="display: flex;align-items: center;">
                            <div :style="row.isGetInvolved === 1 ? 'background: #248BFF' : 'background: #FF0000'"
                                style="width: 6px;height: 6px;border-radius: 50%;margin-right: 5px;" class="left"></div>
                            <div class="right">{{ row.isGetInvolved === 1 ? '是' : '否' }}</div>
                        </div>
                    </template>
                    <template v-if="item.prop === 'CITICauditStatus'" #default="{ row }">
                        <div style="display: flex;align-items: center;">
                            <div v-if="CITICauditStatus[row.CITICauditStatus].bac"
                                :style="{ background: CITICauditStatus[row.CITICauditStatus].bac }"
                                style="width: 6px;height: 6px;border-radius: 50%;margin-right: 5px;" class="left"></div>
                            <div class="right">{{ CITICauditStatus[row.CITICauditStatus].text }}</div>
                        </div>
                    </template>
                    <template v-if="item.prop === 'orderState'" #default="{ row }">
                        <span>{{ row.orderState }}</span>
                    </template>
                    <template v-if="item.prop === 'currency'" #default="{ row }">
                        <span>{{ row.currency }}</span>
                    </template>
                </el-table-column>

            </AppPageTable>
        </div>
        <el-dialog class="dialog" v-model="state.custom.show" title="自定义列" width="800" :before-close="customHandleClose">
            <Draggbale ref="draggbale" :items="state.customColumn"></Draggbale>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="resetDraggbale">重置</el-button>
                    <el-button @click="customHandleClose">取消</el-button>
                    <el-button type="primary" @click="customHandleClose">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { reactive, computed, onMounted } from "vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import request from "@/public/request";
import { MoreFilled } from "@element-plus/icons";
import { fileDownload } from "@/public/publicUtils";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import Draggbale from './components/draggbale.vue'


const Router = useRouter();

let CITICauditStatus = {
    0: {
        text: '异常',
        bac: '#FF0000'
    },
    1:
    {
        text: '通过',
        bac: '#248BFF'
    },
    2: {
        text: '未提交',
        bac: '#D9D9D9'
    },
    3: {
        text: '--',
        // bac: '#D9D9D9'
    },
}

//客户
let client = [
    { value: 0, label: '上海悠迪汽车配件厂' },
    { value: 1, label: '台州硕阳机械有限公司' },
    { value: 2, label: '涂俊梅' },
]
//部门
let department = [
    { value: 0, label: '财务部' },
    { value: 1, label: '销售部' },
    { value: 2, label: '人事部' },
]

//业务员
let salesman = [
    { value: 0, label: '涂俊梅' },
    { value: 1, label: '张三' },
    { value: 2, label: '李四' },
]

const state = reactive({
    // 查询条件
    query: {
        doccode: "", //业务编号
        entId: "", //结算对象名称
        invoice: "", //发票号
        blNo: "", //提单号
        saleId: "", //业务员
        feeStatus: 0, //核销状态
        balanceNo: "", //对账单号
        checkStatus: 0, //审核状态
        currency: "", //币种
        isIncome: "", //收支类型 0 付款 1 收款
        invoiceStatus: 0, //开票状态 0 未开票 1 已开票
        lock: true, //单票锁定
        outState: false, //退关状态
    },
    //自定义列
    customColumn: [
        { prop: 'blNo', label: '合同单号', width: '120' },
        { prop: 'name', label: '公司', width: '150' },
        { prop: 'hetong', label: '客户合同号', width: '120' },
        { prop: 'kehu', label: '客户', width: '120' },
        { prop: 'auditStatus', label: '合同审核状态', width: '130' },
        { prop: 'isGetInvolved', label: '中信保是否介入', width: '150' },
        { prop: 'CITICauditStatus', label: '中信保审核状态', width: '150' },
        { prop: 'orderState', label: '订单状态', width: '120' },
        { prop: 'liebie', label: '订单类别', width: '120' },
        { prop: 'currency', label: '币种', width: '120' },
        { prop: '', label: '付款方式', width: '100' },
        { prop: '', label: '价格条款', width: '100' },
        { prop: '', label: '发票类型', width: '100' },
        { prop: '', label: '本币汇率', width: '100' },
        { prop: '', label: '美元汇率', width: '100' },
        { prop: '', label: '税种', width: '100' },
        { prop: '', label: '订单日期', width: '100' },
        { prop: '', label: '备货日期', width: '100' },
        { prop: '', label: '装运日期', width: '100' },
        { prop: '', label: '交易条件', width: '100' },
        { prop: '', label: '生管交期', width: '100' },
        { prop: '', label: '样品交期', width: '100' },
        { prop: '', label: '包装确认日期', width: '130' },
        { prop: '', label: '运输方式', width: '100' },
        { prop: '', label: '运抵国', width: '100' },
        { prop: '', label: '起运港', width: '100' },
        { prop: '', label: '目的港', width: '100' },
        { prop: '', label: '板块', width: '100' },
        { prop: '', label: '生产基地', width: '100' },
        { prop: '', label: '跟单员', width: '100' },
        { prop: '', label: '绑单员', width: '100' },
        { prop: '', label: '包装员', width: '100' },
        { prop: '', label: '创建人', width: '100' },
        { prop: '', label: '绑单审核人', width: '130' },
        { prop: '', label: 'ERP单号', width: '100' },
        { prop: '', label: '信保类型', width: '100' },
        { prop: '', label: '合同总金额', width: '120' },
        { prop: '', label: '原币总金额', width: '120' },
        { prop: '', label: '原币总金额（折扣）', width: '170' },
        { prop: '', label: 'USD总金额', width: '120' },
        { prop: '', label: '成本总金额', width: '120' },
        { prop: '', label: '税前总金额', width: '120' },
        { prop: '', label: '含税总金额', width: '120' },
        { prop: '', label: 'RMB总金额', width: '120' },
        { prop: '', label: '其他增加款项', width: '130' },
        { prop: '', label: '其他扣除款项', width: '130' },
        { prop: '', label: '总税款', width: '100' },
        { prop: '', label: '商品总数量', width: '120' },
        { prop: '', label: '总毛利金额', width: '120' },
        { prop: '', label: '总毛利率', width: '100' },
        { prop: '', label: '退税率', width: '100' },
        { prop: '', label: '备注', width: '100' },
    ],
    //表格数据
    tableData: {
        data: [
            { blNo: 'JH2401878', name: '君禾泵业股份有限公司', hetong: "SD240410+11", kehu: 'Glong italy srl', liebie: "外销促销订单", auditStatus: 1, isGetInvolved: 1, CITICauditStatus: 1, orderState: '', currency: '人民币' },
            { blNo: 'JH2401878', name: '君禾泵业股份有限公司', hetong: "SD240410+11", kehu: 'Glong italy srl', liebie: "外销促销订单", auditStatus: 1, isGetInvolved: 0, CITICauditStatus: 3, orderState: '', currency: '人民币' },
            { blNo: 'JH2401878', name: '君禾泵业股份有限公司', hetong: "SD240410+11", kehu: 'Glong italy srl', liebie: "外销促销订单", auditStatus: 1, isGetInvolved: 1, CITICauditStatus: 2, orderState: '--', currency: '人民币' },
            { blNo: 'JH2401878', name: '君禾泵业股份有限公司', hetong: "SD240410+11", kehu: 'Glong italy srl', liebie: "外销促销订单", auditStatus: 1, isGetInvolved: 1, CITICauditStatus: 0, orderState: '--', currency: '人民币' }
        ],
        option: useTableOption(),
    },
    tableLoading: false,
    // 展开
    hidden: false,
    // 币种
    current: [],
    // 币种数组
    curList: [],
    currentLoading: false,
    // 业务员下拉框
    salesman: [],
    salesmanLoading: false,
    //客户下拉框
    clientList: [],
    clientLoading: false,
    // 币种数组
    curList: [],
    currentLoading: false,
    //部门
    department: [],
    show: false,
    //自定义列数据
    custom: {
        show: false,
        data: []
    },
    //温馨提示show
    tipsShow: true,
})

// 跳转自有合同详情页面
const toEditPage = async (id) => {
    Router.openTab({
        path: "/exportContract/exportContractBusiness/ProprietaryContractDetail",
        query: {
            id: id,
            // title: `业务详情${row.doccode}`,
            // iscopy: false,
            // tab: '费用信息'
        },
    });
}

//自定义列dialog打开
function customOpen() {
    state.custom.show = true
}

//自定义列dialog关闭
function customHandleClose() {
    state.custom.show = false
}

//关闭温馨提示
function tipsClose() {
    state.tipsShow = false
}

//重置自定义列
function resetDraggbale() {
    console.log('重置了')
}

// 获取币种类型
const getCurrentData = async (val) => {
    state.currentLoading = true;
    let res = await request.get("/api/base/currency/dropdownlist", {
        keywords: val,
    });
    state.current = res.map((item) => {
        return {
            label: item.currencyCode + "|" + item.currencyName,
            value: item.currencyCode,
        };
    });
    console.log(state.current);
    state.currentLoading = false;
}

// 获取客户信息
const getCustomData = async (val) => {
    state.clientLoading = true;
    let res = await request.get("/api/crcontactcompany/querypagedto", {
        PageIndex: 1,
        PageSize: 15,
        ComNameCn: val,
    });
    console.log(res)
    state.clientList = res.content;
    state.clientLoading = false;
};

// 获取业务员信息
const getUserData = async (val) => {
    state.salesmanLoading = true;
    let res = await request.get("/api/user/query", {
        PageIndex: 1,
        PageSize: 15,
        KeyWords: val,
    });
    state.salesman = res.content;
    state.salesmanLoading = false;
};

//部门tree
const getdepartmentTree = async () => {
    const res = await request.get('/api/department/buildTree')
    console.log(res)
    state.department = res
}


//同步更新
function syncUpdate() {
    ElMessage.success('同步更新成功')
}

//刷新
function refresh() {
    ElMessage.success('刷新成功')
}

//重置
function reset() {
    state.query = {
        entId: "",  //合同类别
        blNo: "",    //合同单号
        blN: "",   //客户合同号
        CustomId: "",    //客户
        department: "",   //部门
        salesman: "",    //业务员
        currency: "",   //币种
        orderState: ""  //订单状态
    }
}

//获取列表
function getList() {

}

onMounted(() => {
    getdepartmentTree()
})

</script>

<style lang="scss" scoped>
.form-container {
    border: 1px solid #e8e8e8;
    padding: 6px 6px 6px 8px;
    background-color: #ffffff;

    :deep(.el-form-item--small .el-form-item__label) {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.85);
    }

    :deep(.el-input--suffix .el-input__inner) {
        padding-right: 4px;
    }

    :deep(.el-form--inline .el-form-item) {
        display: flex;
        margin-right: 0;
    }

    :deep(.el-form-item--small.el-form-item) {
        margin-bottom: 8px;
    }
}

:deep(.el-checkbox.el-checkbox--large) {
    height: 0px;
}

:deep(.el-dialog__footer) {
    padding-bottom: 10px;
    text-align: center;
}

:deep(.el-table__cell) {
    height: auto;
}

:deep(.el-dialog) {
    padding: 0 0;
}

:deep(.el-dialog__header) {
    border-bottom: 1px solid #e8e8e8;
    padding: 7px 12px;
    font-family: 800;
}

:deep(.el-dialog__footer) {
    border-top: 1px solid #e8e8e8;
    padding: 8px 0;
    text-align: center;
}

.hint {
    padding: 4px;
    background-color: #FEEFF0;
    border: 1px solid #FF0000;
    margin-top: 8px;
    border-radius: 3px;

    .item1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #EE2E3F;
        font-family: Roboto;
        font-weight: regular;
        font-size: 12px;
        line-height: 20px;
        letter-spacing: 0px;
        text-align: left;
        margin-bottom: 3px;

    }

    .item2 {
        color: #000000D8;
        font-family: PingFang SC;
        font-weight: regular;
        font-size: 12px;
        line-height: 20px;
        letter-spacing: 0px;
        text-align: left;
        margin-bottom: 3px;

        span {
            color: #409eff;
            cursor: pointer;
            margin-left: 5px;
        }

    }

    .item3 {
        color: #000000D8;
        font-family: PingFang SC;
        font-weight: regular;
        font-size: 12px;
        line-height: 20px;
        letter-spacing: 0px;
        text-align: left;

        span {
            color: #409eff;
            cursor: pointer;
            margin-left: 5px;

        }
    }
}

.tableDiv {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 12px;
    margin-top: 8px;
    background-color: #ffffff;

    .btns {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 28px;
        // background-color: aqua;
        margin-bottom: 10px;
    }
}
</style>